<template>
  <div>
    <div ref="pathchart" style="height: 800px" />

    <!--跟踪对话框-->
    <el-dialog :title="title" :visible.sync="isPathDialogOpen2" width="500px" append-to-body>
      <el-table v-loading="loading" :data="dataList2">
        <el-table-column label="指标名称" align="center" prop="standardName" />
        <el-table-column label="指标介绍" align="center" prop="introduction" :show-overflow-tooltip="true" />
        <el-table-column label="得分" align="center" prop="accessResult" :show-overflow-tooltip="true"></el-table-column>
      </el-table>
    </el-dialog>
  </div>

</template>

<script>
import * as echarts from "echarts";
import {getMenu} from "@/api/system/menu";
import{getResultTrend} from"@/api/evaluate/evaluateResult"
export default {
  name: "path",
  data() {
    return {
      pathchart: null,
      title: '影响力变化趋势',
      loading: false,
      isPathDialogOpen2: false,
      trendData: [],
      xAxisData: [],
      yAxisData: [],
      dataList2: []
    }
  },
  async mounted(){
    await this.fetchTrendData();
    await this.renderChart();
  },
  methods: {
    // 表格选择变化
    handleSelectionChange(selection) {
      // 空实现，仅用于消除警告
    },

    async fetchTrendData() {
      try {
        this.loading = true;
        const response = await getResultTrend(this.$store.state.evaluate.standardId);
        this.trendData = response.data || [];

        // 处理数据
        this.xAxisData = this.trendData.map(item => item.evaluateDate);
        this.yAxisData = this.trendData.map(item => parseFloat(item.outputValue) || 0);

        if (this.trendData.length === 0) {
          this.$message.warning('暂无趋势数据');
        }
      } catch (error) {
        console.error('获取趋势数据失败:', error);
        this.$message.error('获取趋势数据失败');
      } finally {
        this.loading = false;
      }
    },
    renderChart() {
      this.pathchart = echarts.init(this.$refs.pathchart);

      const option = {
        title: {
          text: '影响力变化趋势',
          left: 'center'
        },
        tooltip: {
          trigger: "axis",
          formatter: params => {
            return `日期: ${params[0].name}<br/>得分: ${params[0].value}`;
          }
        },
        xAxis: {
          type: 'category',
          data: this.xAxisData,
          axisLabel: {
            rotate: 30
          }
        },
        yAxis: {
          type: 'value',
          min: value => Math.max(0, value.min - 5)
        },
        series: [{
          name: "总评得分",
          type: "line",
          data: this.yAxisData,
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          itemStyle: {
            color: '#5470c6'
          },
          animationEasing: "cubicInOut",
          animationDuration: 1000,
        }]
      };

      this.pathchart.setOption(option);

      // 响应式调整
      const resizeHandler = () => this.pathchart.resize();
      window.addEventListener("resize", resizeHandler);

      // 组件销毁时移除监听
      this.$once('hook:beforeDestroy', () => {
        window.removeEventListener("resize", resizeHandler);
        this.pathchart.dispose();
      });
    }
  }
}
</script>

<style scoped>

</style>
